<template>
  <div>
    <!-- 表格整体 -->
    <common-table
      :table-attrs="tableAttrs"
      @multiple="selectHandler"
      @controller="controllerHandler"
    >
      <template #default>
        <!-- 表格内搜索表单 -->
        <common-form
          :form-infos="searchForm"
          :form-attrs="{
            'label-width': 'auto',
            'label-position': 'left',
            size: 'small',
            inline: true,
          }"
          @submit="onSearchSubmit"
        />
        <el-button  size="small" @click="isShowDialog = !isShowDialog">添加数据</el-button>
      </template>



        

      <!-- 表格展开信息 -->
      <template #expand="props">
        {{props.props.row}}
      </template>
    </common-table>
    <!-- 弹出框编辑表单 -->
    <el-dialog title="添加优惠券" v-model="isShowDialog">
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="操作提示" name="1">
                <ul >
                    <li> • 标识“*”的选项为必填项，其余为选填项</li> 
                    <li> • 有效期类型可选固定时间和自领取之日起
                        <ol style="list-style-type: round; margin-left:30px">
                            <li >
                               <div>固定时间：选择结束日期，所有领取的优惠券有效期都截止在结束日期当天</div> 
                            </li>
                            <li>
                               <div>自领取之日起：填写一个数字，表示从领取之日起有效期持续多少天</div> 
                            </li>
                        </ol>
                    </li> 
                </ul>
            </el-collapse-item>
        </el-collapse>
      <common-form style="margin-top:10px"
        :form-infos="editForm"
        :form-attrs="{
          'label-width': 'auto',
          'label-position': 'left',
          size: 'small',
          inline: true,
        }"
        @submit="onEditSubmit"
      />
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, shallowReactive, ref } from "vue";

export default defineComponent({
  setup() {
    const tableAttrs = shallowReactive({
      // Table Attributes
      name: '表格标题',
      infos: ['点击添加优惠券按钮可以添加优惠券，点击详情按钮可以查看优惠券详情',
            '进行中的优惠券需先关闭才可进行删除操作',
            '点击删除按钮可以删除优惠券',
            '时间超过优惠券设置的结束时间或有效期限时，优惠券自动关闭',
            '手动关闭优惠券后，用户将不能领取该优惠券，但是已经领取的优惠券（未到期）仍然可以使用'],
      attrs: {
        data: [
          //表格需要的数据
          {
            date: "2016-05-02",
            name: "店铺活动",
            denomination: "100-20",
            num: "200",
            limit: "2",
            time: "2021-09-02",
            status: "可用有效期类型可选固定时间和自领取之日起",
          },
          
          
        ],
        ref: "multipleTable",
        style: "100%",
      },
      // Table-column Attributes
      column: [
       {
          type: "selection",  //多选框Attribute
        },
        {
          prop: "name",
          label: "优惠券名称",
        },
        {
          prop: "denomination",
          label: "面额",
        },
        {
          prop: "num",
          label: "发放数量",
          sortable: true,
        },
        {
          prop: "limit",
          label: "领取上限",
          sortable: true,
        },
        {
          prop: "time",
          label: "有效期限",
          sortable: true,
        },
        {
          prop: "status",
          label: "状态",
          sortable: true,
        },
        ],
      // 操作按钮
      controller: ["违规", "违规", "违规下架"],
    });
    //搜索表单配置
    const searchForm = shallowReactive([
      {
        id: 1,
        name: "CommonInput", //组件名
        prop: "s1", //搜索字段名
        value: "", //可以为 字符串、数组、数值根据组件绑定的类型来配置
        formItemAttrs: {
          //el-form-item 需要传入的 Form-Item Attributes
          label: "优惠券名称",
        },
        inputAttrs: {
          //表单组件需要传入的对应的 Attributes
          type: "text",
          placeholder: "请输入优惠券名称",
        },
      },
      {
        id: 8,
        name: "CommonCascader",
        prop: "s3",
        value: [],
        options: [
          {
            value: "1",
            label: "全部",
          },
          {
            value: "2",
            label: "固定时间",
          },
          {
            value: "3",
            label: "相对时间",
          },
        ],
        formItemAttrs: {
          label: "有效期限",
        },
        inputAttrs: {
          placeholder: "请选择",
          props: { expandTrigger: "hover" },
        },
      },
        {
        id: 13,
        name: "CommonDatePicker",
        prop: "datePicker",
        value: "",
        formItemAttrs: {
          label: "开始时间",
        },
        inputAttrs: {
          type: "datetime",
          placeholder: "选择日期",
        },
      },
        {
        id: 13,
        name: "CommonDatePicker",
        prop: "datePicker",
        value: "",
        formItemAttrs: {
          label: "结束时间",
        },
        inputAttrs: {
          type: "datetime",
          placeholder: "选择日期",
        },
      },
    ]);

    //编辑表单配置
    
    const editForm = shallowReactive([
      {
        id: 1,
        name: "CommonInput",
        prop: "f1",
        value: "",
        formItemAttrs: {
          label: "优惠券名称：",
        },
        inputAttrs: {
          type: "text",
          placeholder: "",
        },
      },
      {
        id: 2,
        name: "CommonInputNumber",
        prop: "f2",
        value: 1,
        formItemAttrs: {
          label: "优惠券面额(元)：",
        },
        inputAttrs: {
          min: 1,
          precision:2,
          controlsPosition:"right",
        },
      },
     {
        id: 3,
        name: "CommonRadio",
        prop: "f3",
        value: "1",
        options: {
          "1": "全场通用",
          "2": "指定店铺",
        },
        formItemAttrs: {
          label: "使用场景",
        },
        inputAttrs: {},
        subAttrs: {},
      },
       {
        id: 4,
        name: "CommonInputNumber",
        prop: "f4",
        value: 1,
        formItemAttrs: {
          label: "店铺分担比率(%)：",
        },
        inputAttrs: {
          min: 1,
          precision:2,
          controlsPosition:"right",
        },
      },
       {
        id: 5,
        name: "CommonInputNumber",
        prop: "f5",
        value: 1,
        formItemAttrs: {
          label: "发放数量(张)：",
        },
        inputAttrs: {
          min: 1,
          controlsPosition:"right",
        },
      },
       {
        id: 6,
        name: "CommonInputNumber",
        prop: "f6",
        value: 1,
        formItemAttrs: {
          label: "最大领取数量(张)：",
        },
        inputAttrs: {
          min: 1,
          controlsPosition:"right",
        },
      },
       {
        id: 7,
        name: "CommonInputNumber",
        prop: "f7",
        value: 1,
        formItemAttrs: {
          label: "满多少元可以使用(元)：",
        },
        inputAttrs: {
          min: 1,
          precision:2,
          controlsPosition:"right",
        },
      },
       {
        id: 8,
        name: "CommonRadio",
        prop: "f8",
        value: "1",
        options: {
          "1": "固定时间",
          "2": "领取之日起",
        },
        formItemAttrs: {
          label: "有效期类型",
        },
        inputAttrs: {},
        subAttrs: {},
      },
       {
        id: 13,
        name: "CommonDatePicker",
        prop: "datePicker",
        value: "",
        formItemAttrs: {
          label: "活动结束时间",
        },
        inputAttrs: {
          type: "datetime",
          placeholder: "选择日期",
        },
      },
    ]);

    //弹出框绑定
    let isShowDialog = ref(false);

    //表格多选框触发
    const selectHandler = (val) => {
      console.log(val);
    };

    //表格操作按钮触发
    const controllerHandler = (type, row) => {
      console.log(type, row);
    };

    //搜索表单提交
    const onSearchSubmit = (data) => {
      console.log("search", data);
    };

    //编辑表单提交
    const onEditSubmit = (data) => {
      console.log("edit", data);
    };
    // 展开操作提示
   const activeNames="1";


    return {
      tableAttrs,
      searchForm,
      editForm,
      isShowDialog,
      activeNames,
      selectHandler,
      controllerHandler,
      onSearchSubmit,
      onEditSubmit,
    };
  },
});
</script>
<style scoped>

</style>